require(['./config'], () => {
    require(['template','header','url','jquery'], (template,header,url) => {
        class Shopping {
            constructor () {
                this.addfooter()
                header.cardCount()
                this.addshopping()
               
            }
            
            addfooter(){
                $('footer').load('../html/footer.html')
            }
            addshopping(){
                let card = localStorage.getItem('card')
                this.card = JSON.parse(card)
                $('.shoplist').html(template('shops',{card:this.card}))
                this.pageShow()
                this. clearLocal()
            }
            //根据购物车是否为空显示相应页面
            pageShow(){
                let card = localStorage.getItem('card')
                if(card){
                    this. checkChange()
                    this.settle()
                    this.math()
                    this. totalMoney()
                    this. delect()
                    $('.oncontent').hide()
                }else{
                    $('.content').hide()
                    $('.oncontent').show()
                }
            }
            //全选
            settle(){
                $('.quan').on('click',() =>{
                //未选中时，点击全选，其余全部选中
                if($('.quan').prop('checked')){
                    $.each(this.card,function(i,item){
                        //更改页面checks 的 checked 属性
                        $('.body .checks').eq(i).prop('checked','checked')
                        //更改localStorage里的 check 值为 true
                        item.check = true
                     })
                //选中时，点击全选，其余全部取消选中
                }else{
                     $.each(this.card,function(i,item){
                        $('.body .checks').eq(i).prop('checked','')
                         item.check = false
                     })
                } 
                    //把更改后的整个数组存储到localStorage
                    localStorage.setItem('card',JSON.stringify(this.card))
                    this. totalMoney()
                })
            }
            //选中改变
            checkChange(){
                let _this=this
                $('.body .checks').on('change',function(){
                    //获取点击元素id
                    let idx = Number( $(this).parents('.body').attr('idx'))
                   
                    _this.card = _this.card.map(shop =>{

                        if(idx === shop.id) shop.check = $(this).prop('checked')
                        return shop
                    })
                    //把更改后的整个数组存储到localStorage
                    localStorage.setItem('card',JSON.stringify(_this.card))
                    _this. totalMoney()
                    _this. allcheck()
                })

            }
            allcheck(){
                //一个不为checked，.quan 变为 false
                $('.quan').prop('checked',this.card.every(shop => shop.check));
                //全为true,.quan为 true
            }
            //加减按钮
            math(){
                let _this=this
                //减
                $('.content').on('click','.jian',function(){
                    
                    //点击一次减一
                    let num = $(this).siblings(".num")
                    num.val(Number(num.val()) - Number(1))
                    //小于1就等于1
                    if(num.val() <= 1){
                        num.val(1)
                    }
                    //获取当前元素的id
                    let idx =  $(this).parents('.body').attr('idx')
                    
                    //循环数组，i - 索引 item 数组里每一个对象
                    $.each(_this.card,function(i,item){
                        //如果当前对象id== card对象id
                        if(idx == item.id){
                            //改变count 加入购物车数量
                            item.count = parseInt(num.val())
                            //根基 i 获取当前对象的总价并改变它
                            let total = $('.jian').eq(i).parents('.body').find('.total')
                            //总价 = money * count 数量
                            total.html(item.money*item.count) 
                        }
                    })
                    //把整个数组存储到localStorage
                    localStorage.setItem('card',JSON.stringify(_this.card))
                    _this. totalMoney()
                })

                //加
                $('.content').on('click','.add',function(){
                    //点击一次加一
                    let num = $(this).siblings(".num")
                    num.val(Number(num.val()) + Number(1))
                    //大于10就等于10
                    if(num.val() >= 10){
                        num.val(10)
                    }
                    //总价
                    let idx =  $(this).parents('.body').attr('idx')
                    let card = localStorage.getItem('card')
                    card = JSON.parse(card)
                    
                    $.each(_this.card,function(i,item){
                        if(idx == item.id){
                            item.count = parseInt(num.val())
                            let total = $('.add').eq(i).parents('.body').find('.total')
                            total.html(item.money*item.count) 
                        }
                    })
                    //把整个数组存储到localStorage
                    localStorage.setItem('card',JSON.stringify(_this.card))
                    _this. totalMoney()
                })
            }
            //计算总价
            totalMoney(){
              
                let allMoney = this.card.reduce((sum,shop) =>{
                    if(shop.check){
                        sum += shop.count * shop.money
                    }
                    return sum
                },0)
                $('.moneys').html("￥"+ allMoney)
            }
            //删除
            delect(){
                let _this = this;
                $('.del').on('click',function(){
                   
                    let res = _this.card.filter(x => x.check === false)
                     
                    $.each($('.body .checks'),function(i,item){
                       if($(this).attr('checked')){
                          $(this).parents('.body').remove()
                       }
                    })
                     //把整个数组存储到localStorage
                    localStorage.setItem('card',JSON.stringify(res))
                    _this. totalMoney()
                    _this. clearLocal()
                    _this. addshopping()
                })
               
            }
            //删除localStorage
            clearLocal(){
                if(this.card.length === 0){
                    $('.content').hide()
                    $('.oncontent').show()
                }
            }
               
        } 
        new Shopping()
    })
})